<template>
    <!--DengLuYeMianhtmlStart-->

    <div id="defaultId1" class=" login">
        <el-form id="idRtt76v" class="login-form uDf38kv" ref="loginForm" :model="loginForm" :rules="loginRules">
            <h3 id="idqvIGII" class=" title">不可再生资源后台管理系统
            </h3>
            <el-form-item id="id8BrCA7" prop="username">
                <el-input id="id4V22nj" v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
                    <svg-icon id="idiENNnw" class="el-input__icon  input-icon" slot="prefix" icon-class="user">
                    </svg-icon>
                </el-input>
            </el-form-item>
            <el-form-item id="idDmKf13" prop="password">
                <el-input id="idaREKPv" v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
                    <svg-icon id="idhOHSqR" class="el-input__icon input-icon " slot="prefix" icon-class="password">
                    </svg-icon>
                </el-input>
            </el-form-item>
            <el-form-item id="idEt24PD" prop="code" v-if="captchaEnabled">
                <el-input id="idQCSH2d" v-model="loginForm.code" class=" u24VroF" auto-complete="off" placeholder="验证码" @keyup.enter.native="handleLogin">
                    <svg-icon id="idxv1je6" class="el-input__icon input-icon " slot="prefix" icon-class="validCode">
                    </svg-icon>
                </el-input>
                <div id="idJ5DcgE" class="login-code ">
                    <img id="idPpSbUm" @click="getCode" class=" login-code-img" :src="codeUrl" />
                </div>
            </el-form-item>
            <el-checkbox id="id187Llm" v-model="loginForm.rememberMe" class=" umWNvXg">记住密码
            </el-checkbox>
            <el-form-item id="idkLPvQ3" class=" uD6Nofs">
                <el-button id="idMq95tV" class=" uI9clh2" :loading="loading" size="medium" type="primary" @click.native.prevent="handleLogin">
                    <span id="idJgbWKE" v-if="!loading">登 录
                    </span>
                    <span id="idvBNHq4" v-else>登 录 中...
                    </span>
                </el-button>
                <div id="idvDJxpj" class=" uOe5pf4" v-if="register">
                    <router-link id="idDVaODo" class="link-type " :to="'/register'">立即注册
                    </router-link>
                </div>
            </el-form-item>
        </el-form>
        <!-- 底部 -->
        <div id="id9zeAvG" class=" el-login-footer">
        </div>
    </div>
    <!--DengLuYeMianhtmlEnd-->

</template>

<script>
    import {
        getCodeImg
    } from "@/api/login";
    import Cookies from "js-cookie";
    import {
        encrypt,
        decrypt
    } from '@/utils/jsencrypt'

    export default {
        name: "Login",
        data() {
            return {
                // insertData
                // DengLuYeMianDataStart

                // redirect
                redirect: undefined,
                // loginForm
                loginForm: {
                    "username": "admin",
                    "password": "admin123",
                    "rememberMe": false,
                    "code": "",
                    "uuid": ""
                },
                // loginRules
                loginRules: {
                    "username": [{
                        "required": true,
                        "trigger": "blur",
                        "message": "请输入您的账号"
                    }],
                    "password": [{
                        "required": true,
                        "trigger": "blur",
                        "message": "请输入您的密码"
                    }],
                    "code": [{
                        "required": true,
                        "trigger": "change",
                        "message": "请输入验证码"
                    }]
                },
                // captchaEnabled
                captchaEnabled: true,
                // codeUrl
                codeUrl: '',
                // loading
                loading: false,
                // register
                register: false
                // DengLuYeMianDataEnd

            };
        },
        watch: {
            $route: {
                handler: function(route) {
                    this.redirect = route.query && route.query.redirect;
                },
                immediate: true
            }
        },
        created() {
            this.getCode();
            this.getCookie();
        },
        methods: {
            // insertMethod
            // DengLuYeMianMethodStart
            // getCookie
            getCookie() {

                const username = Cookies.get("username");
                const password = Cookies.get("password");
                const rememberMe = Cookies.get('rememberMe')
                this.loginForm = {
                    username: username === undefined ? this.loginForm.username : username,
                    password: password === undefined ? this.loginForm.password : decrypt(password),
                    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
                };

            }, // handleLogin
            handleLogin() {

                this.$refs.loginForm.validate(valid => {
                    if (valid) {
                        this.loading = true;
                        if (this.loginForm.rememberMe) {
                            Cookies.set("username", this.loginForm.username, {
                                expires: 30
                            });
                            Cookies.set("password", encrypt(this.loginForm.password), {
                                expires: 30
                            });
                            Cookies.set('rememberMe', this.loginForm.rememberMe, {
                                expires: 30
                            });
                        } else {
                            Cookies.remove("username");
                            Cookies.remove("password");
                            Cookies.remove('rememberMe');
                        }
                        this.$store.dispatch("Login", this.loginForm).then(() => {
                            this.$router.push({
                                path: this.redirect || "/"
                            }).catch(() => {});
                        }).catch(() => {
                            this.loading = false;
                            if (this.captchaEnabled) {
                                this.getCode();
                            }
                        });
                    }
                });

            }, // getCode
            getCode() {

                getCodeImg().then(res => {
                    this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
                    if (this.captchaEnabled) {
                        this.codeUrl = "data:image/gif;base64," + res.img;
                        this.loginForm.uuid = res.uuid;
                    }
                });

            }
            // DengLuYeMianMethodEnd

        }
    };
</script>

<style rel="stylesheet/scss" lang="scss">
    .DengLuYeMiancssStart {}

    .login {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        background-image: url(../assets/images/back.png);
        background-size: cover;
    }

    .uDf38kv {
        background-image: url(../assets/images/background.png);
        position: absolute;
        right: 600px;
    }

    .title {
        margin: 0px auto 30px auto;
        text-align: center;
        color: #707070;
    }

    .input-icon {
        height: 39px;
        width: 14px;
        margin-left: 2px;
    }

    .u24VroF {
        width: 63%
    }

    .login-code-img {
        height: 38px;
    }

    .umWNvXg {
        margin: 0px 0px 25px 0px;
    }

    .uD6Nofs {
        width: 100%;
    }

    .uI9clh2 {
        width: 100%;
    }

    .uOe5pf4 {
        float: right;
    }

    .el-login-footer {
        height: 40px;
        line-height: 40px;
        position: fixed;
        bottom: 0;
        width: 100%;
        text-align: center;
        color: #fff;
        font-family: Arial;
        font-size: 12px;
        letter-spacing: 1px;
    }

    .DengLuYeMiancssEnd {}





    .login-form {
        border-radius: 6px;
        background: #ffffff;
        width: 400px;
        padding: 25px 25px 5px 25px;

        .el-input {
            height: 38px;

            input {
                height: 38px;
            }
        }

    }

    .login-code {
        width: 33%;
        height: 38px;
        float: right;

        img {
            cursor: pointer;
            vertical-align: middle;
        }
    }
</style>

// DengLuYeMianMountedStart

// DengLuYeMianMountedEnd
// DengLuYeMianPropsStart

// DengLuYeMianPropsEnd
//importStart

//importEnd